<template>
	<view class="superwei-combox" :class="border ? '' : 'superwei-combox__no-border'">
		<view v-if="label" class="superwei-combox__label" :style="labelStyle">
			<text>{{ label }}</text>
		</view>
		<view class="superwei-combox__input-box">
			<input class="superwei-combox__input" type="text" disabled @click="toggleSelector"
				:placeholder="placeholder" placeholder-class="superwei-combox__input-plac" v-model="inputVal"
				@input="onInput" @focus="onFocus" @blur="onBlur" />
			<uni-icons :type="showSelector ? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector">
			</uni-icons>
		</view>
		<view class="dialog-cover" v-if="showSelector" @click="handleClose"></view>
		<view class="superwei-combox__selector" :class="showType.length > 0 ? 'addWidth' : ''" v-if="showSelector">
			<view class="uni-popper__arrow"></view>
			<view class="h-table">
				<view class="h-tr h-tr-2 h-thead">
					<view class="h-td h-td-colspan h-td-rowspan">
						<input class="search-input" :placeholder="$t('pageTranslation.pleaseEnterThe')"
							placeholder-style="font-size:14rpx" v-model="locationInput">
					</view>
				</view>
				<view class="h-tr h-tr-2 h-thead ">
					<view class="h-td">{{ $t('JsInternational.volumnStockName') }}</view>
					<view class="h-td">{{ $t('JsInternational.volumnStockOf') }}</view>
				</view>
				<view :style="'height: 300rpx;overflow-y: auto;'">
					<block v-for="(x, i) in list" :key="i">
						<view class="h-tr h-tr-2" @click="getClickItem(x)" v-if="x.calculateVolume >=0">
							<view class="h-td">{{ x.locationCode }}</view>
							<view class="h-td">{{ x.calculateVolume }}</view>
						</view>
					</block>
				</view>
			</view>
			<view class="table-footer">
				<view class="table-info">
					<view class="uni-pagination__btn" :class="currentIndex === 1 ? 'uni-pagination--disabled' : ''"
						@click="pageUp">
						<uni-icons color="#666" size="16" type="left" />
					</view>
					<text> <text class="text-color">{{ currentIndex }}</text>/{{ maxPage }}</text>
					<view class="uni-pagination__btn" :class="currentIndex >= maxPage ? 'uni-pagination--disabled' : ''"
						@click="nextPage">
						<uni-icons color="#666" size="16" type="right" />
					</view>
				</view>
				<view class="uni-pagination__btn" @click="rest">
					<uni-icons color="#666" size="16" type="refreshempty" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		locationRequest
	} from '@/api/api.js'
	import {
		toRaw
	} from 'vue';
	/**
	 * Combox 组合输入框
	 * @description 组合输入框一般用于既可以输入也可以选择的场景
	 * @property {String} label 左侧文字
	 * @property {String} labelWidth 左侧内容宽度
	 * @property {String} placeholder 输入框占位符
	 * @property {String} value 组合框的值
	 * @property {String} selectedBackground 选中项背景颜色
	 * @property {String} selectedColor 选中项文字颜色
	 * @property {String} keyName json数组显示的字段值
	 * @property {String} showType 右标题
	 * @property {Bool} requestBool 是否直接请求的标识
	 * @property {Object} locationList 来料入库的库位标识
	 */
	export default {
		name: 'superweiCombox',
		emits: ['input', 'update:modelValue', 'select', 'setClick'],
		props: {
			locationList: {
				type: Object,
				default () {
					return []
				}
			},
			keyName: {
				type: String,
				default: ''
			},
			showType: {
				type: String,
				default: ''
			},
			selectedBackground: {
				type: String,
				default: '#f5f7fa'
			},
			selectedColor: {
				type: String,
				default: '#409eff'
			},
			border: {
				type: Boolean,
				default: true
			},
			label: {
				type: String,
				default: ''
			},
			labelWidth: {
				type: String,
				default: 'auto'
			},
			placeholder: {
				type: String,
				default: ''
			},
			requestParam: {
				type: Object,
				default () {
					return {}
				}
			},
			requestUrl: {
				type: String,
				default: '',
			},
			requestBool: {
				type: Boolean,
				default: true
			},
			ignoreLocationCode: {
				type: Object,
				default () {
					return []
				}
			},
			// {
			// 	locationCode:'', //库位code
			// 	surplusCapacity:0, //后端告诉前端容量
			// 	barcodeList:[], //当前库位本次扫描绑定的barcode条码集合
			// 	currentCapacity:0, //后端容量减去本次扫描绑定条码的剩余容量  前端预算容量
			// }
			locationUseList: {
				type: Object,
				default () {
					return []
				}
			},
			// #ifndef VUE3
			value: {
				type: [String, Number],
				default: ''
			},
			// #endif
			// #ifdef VUE3
			modelValue: {
				type: [String, Number],
				default: ''
			},
			// #endif
			// #ifdef VUE3
			defaultModelValue: {
				type: [String, Number],
				default: ''
			},
			// #endif
		},
		data() {
			return {
				isInput: false,
				showSelector: false,
				inputVal: '',
				isClick: false,
				currentIndex: 1,
				rows: 10,
				list: [],
				scanBarCodeCount: {}, //扫描的某个库位条码数
				total: 0,
				locationInput: '',
				timer: '',
			}
		},
		computed: {
			labelStyle() {
				if (this.labelWidth === 'auto') {
					return ""
				}
				return `width: ${this.labelWidth}`
			},
			maxPage() {
				return Math.ceil(this.total / this.rows);
			}
		},

		mounted() {
			const that = this
			uni.$on('reduceInventoryCount', (data) => {
				that.scanBarCodeCount = data
			})
		},
		watch: {
			// #ifndef VUE3
			value: {
				handler(newVal) {
					this.inputVal = newVal
					this.isInput = true
				},
				immediate: true
			},
			// #endif
			// #ifdef VUE3
			modelValue: {
				handler(newVal) {
					this.inputVal = newVal
					this.isInput = true
				},
				immediate: true
			},
			// #endif
			// #ifdef VUE3
			defaultModelValue: {
				handler(newVal) {
					this.inputVal = ''
					this.isInput = true
				},
				// immediate: true
			},
			// #endif
			locationInput: {
				handler(newVal) {
					console.log(newVal)
					if (this.timer) {
						clearTimeout(this.timer)
					}
					this.timer = setTimeout(() => {
						this.changeMachine()
					}, 1000)
				},
				immediate: true
			},
			requestUrl: {
				handler(newVal) {
					this.inputVal = '';
					this.$emit('setClick', {});
					this.locationInput = ''
				},
				// immediate: true
			}
		},
		methods: {
			// 初始化重置数据
			restInitData() {
				this.inputVal = ''
				this.isInput = true
			},
			getClickItem(x) {
				this.inputVal = x.locationCode;
				this.$emit('setClick', x);
				this.showSelector = false;
				this.locationInput = ''
			},
			changeMachine() {
				this.locationRequestFn()
			},
			// 重置
			rest() {
				this.locationInput = ''
				this.currentIndex = 1
				this.locationRequestFn()
			},
			// 上一页
			pageUp() {
				if (this.currentIndex == 1) return;
				this.currentIndex--
				this.locationRequestFn()
			},
			// 下一页
			nextPage() {
				if (this.currentIndex >= this.maxPage) return;
				this.currentIndex++
				this.locationRequestFn()
			},
			// 请求库位信息
			locationRequestFn() {
				if (!this.requestUrl || !this.requestBool) return;
				locationRequest(this.requestUrl, {
					...this.requestParam,
					page: this.currentIndex,
					rows: this.rows,
					locationCode: this.locationInput,
					ignoreLocationCode: this.ignoreLocationCode
				}).then(res => {
					if (res.status == 200) {
						console.log(this.locationList)
						if(this.locationList.length){
							this.list=this.locationList
							this.total = this.locationList.length;
							this.originList = this.locationList; //原始数据
						}
						else{
							this.list = res.data.rows;
							this.total = res.data.total;
							this.originList = res.data.rows; //原始数据
						}
						this.locationCalculate()					
						const that=this
						if(JSON.stringify(that.scanBarCodeCount)!="{}")
						{
							that.list.forEach(e => {
								if (e.locationCode == that.scanBarCodeCount.locationId) {
									e.calculateVolume = e.calculateVolume - that.scanBarCodeCount.count
								}
							})
						}
						
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			//库位计算逻辑
			locationCalculate() {
				this.list.forEach(x => {
					let arry = this.locationUseList.filter(k => x.locationCode == k.locationCode)
					// console.log(arry)
					if (arry.length) {
						x.calculateVolume = x.maxCapacity - x.usedInventory - arry[0].barcodeList.length
					} else {
						x.calculateVolume = x.maxCapacity - x.usedInventory
					}
				})
				// console.log(this.list, 'this.listthis.list');
			},
			handleClose() {
				this.showSelector = false
				this.locationInput = ''
			},
			toggleSelector() {
				this.showSelector = !this.showSelector
				this.isInput = false
				if (this.showSelector) {
					this.currentIndex = 1
					this.locationRequestFn()
				}
			},
			onFocus() {
				this.showSelector = true
				this.isInput = false
				this.currentIndex = 1
				this.locationRequestFn()
			},
			onBlur(e) {
				setTimeout(() => {
					this.isInput = false
					this.isClick = false
				}, 153)
			},
			onInput() {
				setTimeout(() => {
					this.$emit('input', this.inputVal)
					this.$emit('update:modelValue', this.inputVal)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@media only screen and (max-width: 999px) {

		/* 针对手机： */
		.superwei-combox {
			font-size: 14px;
			border: 0px solid #12b7f5;
			border-radius: 4px;
			padding: 6px 10px;
			position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			// height: 40px;
			flex-direction: row;
			align-items: center;
			// border-bottom: solid 1px #DDDDDD;
		}

	}

	@media only screen and (min-width: 1000px) {

		/* 针对手机： */
		.superwei-combox {
			font-size: 14px;
			border: 2px solid #12b7f5;
			border-radius: 4px;
			padding: 6px 10px;
			position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			// height: 40px;
			flex-direction: row;
			align-items: center;
			// border-bottom: solid 1px #DDDDDD;
		}

	}

	.superwei-combox__label {
		font-size: 16px;
		line-height: 22px;
		padding-right: 10px;
		color: #999999;
	}

	.superwei-combox__input-box {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		align-items: center;
	}

	.superwei-combox__input {
		flex: 1;
		font-size: 14px;
		height: 22px;
		line-height: 22px;
		margin-right: 12rpx;
	}

	.superwei-combox__input-plac {
		font-size: 14px;
		color: #ccc; //placeholder-style="color:#FFFFFF"
	}

	.superwei-combox__selector {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
		position: absolute;
		top: calc(100% + 12px);
		left: -24rpx;
		right: -24rpx;
		// width: 100%;
		background-color: #FFFFFF;
		border: 1px solid #EBEEF5;
		border-radius: 6px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		z-index: 702;
		padding: 4px 4px;
	}

	.addWidth {
		width: 120% !important;
		left: -20% !important;
	}


	// picker 弹出层通用的指示小三角
	.uni-popper__arrow,
	.uni-popper__arrow::after {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
		border-width: 6px;
	}

	.uni-popper__arrow {
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
		top: -6px;
		left: 10%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.uni-popper__arrow::after {
		content: " ";
		top: 1px;
		margin-left: -6px;
		border-top-width: 0;
		border-bottom-color: #fff;
	}

	.superwei-combox__no-border {
		border: none;
	}

	.table-footer {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.uni-pagination__btn {
		/* #ifndef APP-NVUE */
		display: flex;
		cursor: pointer;
		/* #endif */
		padding: 0 8px;
		line-height: 30px;
		font-size: 12px;
		position: relative;
		background-color: #F0F0F0;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		text-align: center;
		border-radius: 5px;
	}

	.uni-pagination--disabled {
		opacity: 0.5;
		/* #ifdef H5 */
		cursor: default;
		/* #endif */
	}

	.text-color {
		color: #007aff;
	}

	.table-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 80%;
	}

	.dialog-cover {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0);
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		z-index: 100;
	}

	.search-input {
		text-align: left;
		width: 80%;
		height: 80%;
		background-color: #fff;
		border-radius: 12rpx;
		color: #666;
		padding: 0 20rpx;
	}
</style>
